<template>
  <div class="condition">
    <el-form
      ref="conditionForm"
      :inline="true"
      :model="formData"
      :rules="rules"
      label-position="left"
      class="form-inline label-left"
    >
      <el-form-item label="疾病" prop="ruleId">
        <el-select
          v-model="formData.ruleId"
          placeholder="请输入"
          @change="diseaseChange"
        >
          <el-option
            v-for="{ label, value } in diseases"
            :key="value"
            :label="label"
            :value="value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="风险输入地" prop="country">
        <city-selector ref="CSelectorCountry" v-model="formData.country" />
      </el-form-item>
      <el-form-item label="风险来源地" prop="from">
        <city-selector v-model="formData.from" />
      </el-form-item>
      <el-form-item label="时间" prop="date">
        <el-date-picker
          v-model="formData.date"
          type="date"
          placeholder="日期选择"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <!-- <el-date-picker
                    v-model="formData.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker> -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button style="margin-left: 0" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import CitySelector from "../components/CitySelector/index.vue";
import { filterDiseases } from "../api/risk";

export default {
  name: "Condition",
  components: { CitySelector },
  data() {
    return {
      diseases: [{ label: "猴痘", value: 1 }],
      formData: {
        ruleId: "",
        country: { code: "", name: "" },
        from: { code: "", name: "" },
        // date: [],
        date: "",
      },
      rules: {
        ruleId: [{ required: true, message: "请输入疾病", trigger: "blur" }],
        country: [
          {
            validator: (rule, value, cb) => {
              if (value.code === "") {
                cb(new Error("请输入风险国家"));
              } else {
                cb();
              }
            },
            required: true,
            // message: '请输入风险国家',
            trigger: "blur",
          },
        ],
        date: [{ required: true, message: "请输入日期", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      filterDiseases()
        .then((res) => {
          const { data } = res;
          this.diseases = data;
        })
        .then(() => {
          const { value, info } = this.diseases[0];
          // const city = this.$refs.CSelectorCountry.search(
          //   info?.defaultDestinationArea
          // );
          // // 初始化条件 feng sheng
          // this.formData = {
          //   ruleId: value,
          //   // country: { code: "CN", name: "中国" },
          //   country: {
          //     code: info?.defaultDestinationArea ?? "CN",
          //     name: city?.name,
          //   },
          //   from: { code: "ALL", name: "全球" },
          //   date: typeof info == "string" ? info : info?.defaultDate,
          // };

          this.formData.ruleId = value;
          this.formData.from = { code: "ALL", name: "全球" };
          this.defaultCondition(info);

          this.$nextTick(() => {
            this.onSubmit();
          });
        });
    },
    onSubmit() {
      this.$refs.conditionForm.validate((valid, obj) => {
        if (valid) {
          this.$emit("change", {
            ...this.formData,
            from:
              this.formData.from.code == "ALL"
                ? { code: "", name: this.formData.from.name }
                : this.formData.from,
            diseaseName: this.diseases.find(
              (d) => d.value == this.formData.ruleId
            )?.label,
          });
        } else {
          return false;
        }
      });
    },
    onReset() {
      this.$refs.conditionForm.resetFields();
      // this.formData = {
      //     ruleId: '',
      //     country: { code: '', name: '' },
      //     from: { code: '', name: '' },
      //     date: '',
      // }
    },
    diseaseChange(v) {
      const { value, info } = this.diseases.find((d) => d.value == v);
      this.defaultCondition(info);
    },
    defaultCondition(info) {
      const city = this.$refs.CSelectorCountry.search(
        info?.defaultDestinationArea
      );
      if (!city) {
        console.log(`城市不存在 ${info?.defaultDestinationArea}`);
        return;
      }
      this.formData.country = {
        code: info?.defaultDestinationArea,
        name: city?.name,
      };
      // this.formData.from = { code: "ALL", name: "全球" };
      this.formData.date = typeof info == "string" ? info : info?.defaultDate;
    },
  },
};
</script>

<style lang="scss">
.condition {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  gap: 8px;
  width: 100%;
  .el-select {
    width: 150px;
  }

  .el-form-item {
    margin-bottom: 0;
    .el-form-item__label {
      vertical-align: sub;
    }
  }
}
</style>
